<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		.box{
			width:100px;
			height:100px;
			background-color:deeppink;
			transform:translate(0,0) scale(1);
		}
		.div{
			width: 200px;
			height: 200px;
			border:1px solid red;
		}
		.div div{
			width: 50%;
			height: 50%;
			border:1px solid #00f;
		}
	</style>
	<body>
		<div id='app'>
			<div class="box" :style="{
				transform: 'translate('+x+'px,'+y+'px) scale('+s+')'
			}"></div>
			<hr>
			<!-- 修饰符  更多书上37页-->
			<input @keydown.enter="login" type="text" placeholder="回车">
			<input @keydown.space="login" type="text" placeholder="空格">
			<input @keydown.delete="login" type="text" placeholder="删除">
			<input @keydown.up="login" type="text" placeholder="上箭头">
			<input @keydown.alt="login" type="text" placeholder="alt">
			<input @keydown.ctrl="login" type="text" placeholder="ctrl">
			<input @keydown.shift="login" type="text" placeholder="shift">
			<input @keydown.meta="login" type="text" placeholder="windows">
			<input @keydown.esc="login" type="text" placeholder="esc">
			<br>
			<button>立即登录</button>
			<hr>
			<!-- 事件修饰符 -->
			<!-- 阻止事件冒泡 stop -->
			<div @click="f1" class="div">
				div1
				<div @click.stop="f2">div2
					<div @click.right.prevent="f3">div3</div>
				</div>
			</div>
			<!-- self 元素本身才能触发 子元素不触发 -->
			<!-- once:触发一次 -->
			<div @click.self.once="f1" class="div">
				div1
				<div>div2
					<div>div3</div>
				</div>
			</div>
			<!-- prevent：阻止之间默认行为 -->
			<a @click.prevent="f1" href="shopCar.html">购物车</a>
			<!-- 阻止右键菜单行为 -->
			<div @click.right.prevent="f3">div3</div>
			<hr>
			<div @click.capture="f1" class="div">
				div1
				<div @click.capture="f2">div2
					<div @click="f3">div3</div>
				</div>
			</div>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						x:0,
						y:0,
						s:1
					}
				},
				created(){ },//创建完成1
				mounted(){//挂在完成2 keydown keyup
				// 整个文档绑定键盘事件
					document.addEventListener('keydown',this.move)
				},
				methods:{
					f1(){
						alert('div1')
					},
					f2(){
						alert('div2')
					},
					f3(){
						alert('div3')
					},
					login(){
						alert('登录')
					},
					move(event){   //默认参数  事件对象 黑匣子
						console.log(event.keyCode)
						let code=event.keyCode  //键码
						if(code == 37){ //左
							if(this.x>=10)this.x-=10
						}
						if(code == 39){ //右
							this.x+=10
						}
						if(code == 38){ //上
							if(this.y>=10)this.y-=10
						}
						if(code == 40){ //下
							this.y+=10
						}
						//+ 放大10%  - 缩小10%
						if (code == 187 || code == 107) {
							this.s+=0.1
						}
						if (code == 189 || code == 109) {
							this.s-=0.1
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>